<script setup>
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  baseInfo: {
    cz: 0, // 长住人口
    zh: 0, // 租户数
    wcwg: 0, // 外出务工
    wcjs: 0, // 外出精神
    wcsx: 0, // 外出上学
    tsrq: 0, // 特殊人群数
  },
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http.get('/screen/person/type', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = {} } = res || {}

    dataObj.baseInfo = data || {}
  })
}
</script>

<template>
  <div class="peopleDataBox">
    <div class="dataItem">
      <div class="label">全县常住人口</div>
      <div class="num">{{ dataObj?.baseInfo?.cz || 0 }}<span class="unit">人</span></div>
    </div>

    <div class="dataItem">
      <div class="label">特殊人口数</div>
      <div class="num">{{ dataObj?.baseInfo?.tsrq || 0 }}<span class="unit">人</span></div>
    </div>

    <div class="dataItem">
      <div class="label">租户数</div>
      <div class="num">{{ dataObj?.baseInfo?.zh || 0 }}<span class="unit">个</span></div>
    </div>

    <div class="dataItem">
      <div class="label">外出务工数</div>
      <div class="num">{{ dataObj?.baseInfo?.wcwg || 0 }}<span class="unit">人</span></div>
    </div>

    <div class="dataItem">
      <div class="label">外出经商数</div>
      <div class="num">{{ dataObj?.baseInfo?.wcjs || 0 }}<span class="unit">人</span></div>
    </div>

    <div class="dataItem">
      <div class="label">外出上学数</div>
      <div class="num">{{ dataObj?.baseInfo?.wcsx || 0 }}<span class="unit">人</span></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.peopleDataBox {
  width: 100%;
  height: 113px;
  background: rgba(19, 181, 177, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  .dataItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 16px;

    &:last-child {
      margin-right: 16px;
    }

    .label {
      width: 100%;
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;
    }

    .numBox {
      margin-top: 7px;
      width: 100%;
      height: 29px;
    }

    .num {
      margin-top: 7px;
      width: 100%;
      height: 29px;
      font-size: 24px;
      font-weight: bold;
      font-family: Tahoma-Bold, Tahoma;
      color: #ffffff;
      background: linear-gradient(180deg, #64cdab 0%, #49d0ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
    }

    .unit {
      font-size: 14px;
      color: #ffffff;
      background: #ffffff;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
